<template>
 <d2-container type="card" better-scroll>
  <div class="lunbo_zhu">
    <!-- 手机骨架屏 -->
    <div class="phone_zhu">
      <el-carousel height="250px" :interval="5000" arrow="always">
        <el-carousel-item v-for="item in tableData" :key="item.id">
          <el-image :src="item.url"></el-image>
        </el-carousel-item>
      </el-carousel>

      <div
        v-infinite-scroll="load"
        style=" overflow:auto; height:60%; width:440px;margin-top:20px"
      >
        <!-- 上传图片 -->

        <el-upload
          class="upload-demo"
          :action="action"
          :data="from_img"
          :headers="headers"
          :on-success="successHandle"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :file-list="fileList"
          list-type="picture"
        >
          <el-button
            icon="el-icon-thumb"
            style=" margin-top: 10px;"
            class="btn_el-upload__tip"
            size="small"
            type="primary"
            >选择图片</el-button
          >
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过500kb
          </div>
        </el-upload>
      </div>
    </div>
  </div>
 </d2-container>
</template>

<script>
import axios from "axios";
import {
  get_banner,
  upload_banner,
  get_policy,
  del_banner
} from "@/api/releasecourse/course";
import util from "@/libs/util";
export default {
  data() {
    return {
      beseUrl: "https://sm.ms",
      fileList: [],
      url: null,
      tableData: null,
      form: {
        startTime: "",
        endTime: "",
        // max:'',
        courseClassId: ""
      },
      arr: [],

      from_img: {
        title: new Date().getTime(),
        url: "https://www.baidu.com"
      }
    };
  },
  computed: {
    action() {
      return "https://d.flya.top:31193/stu/admin/addRotationPlot";
    },
    headers() {
      return {
        Authorization: util.cookies.get("token")
      };
    }
  },
  methods: {
    // 上传成功
    successHandle(response, file, fileList) {
      console.log(fileList);

      if (response && response.statusCode == 200) {
        this.fileList.unshift({
          ...file
        });
        this.$message({
          message: "上传成功",
          type: "success"
        });
      } else {
        //删除上传失败的文件
        this.fileList.pop();
        this.$message.error(response.message);
      }
    },

    get_banner() {
      console.log("请求");
      get_banner().then(res => {
        console.log(res.data);
        this.fileList = res.data.map(item => {
          return {
            status: "success",
            uid: item.id,
            url: item.imgUrl,
            title: item.imgUrl,
            name: item.imgUrl
          };
        });
        this.tableData = this.fileList;

        console.log(this.tableData);
      });
    },
    handleRemove(file, fileList) {
      console.log(file);
      this.tableData = fileList;
      let arr = [];
      arr.push(file.uid);
      del_banner(arr).then(res => {
        console.log(res);
        this.$message({
          message: "删除成功",
          type: "success"
        });

        // this.get_banner();
      });
    },
    handlePreview(file) {
      console.log(file);
    }
  },
  created() {
    this.get_banner();
  }
};
</script>

<style>
.lunbo_zhu {
  width: 100%;

  /* display: flex;
  justify-content: center;
  align-items: center; */
}
.phone_zhu {
  border-radius: 40px;
  width: 440px;


  background: rgb(238, 234, 234);
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  
  background-color: #39a9ed;
}
/* 媒体查询 */
@media screen and (max-width: 668px) {
  .phone_zhu {
    width:440px;
    height: 100%;
  }
}
.upload-demo {
  width: 100%;
  height: 550px;
}
</style>
